<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <script src="./lib/flexible.js"></script>
    <link rel="stylesheet" href="./lib/vant.css" />
    <link rel="stylesheet/less" href="./style/index.less" />
    <script src="./lib/less.min.js"></script>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vant.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/base64.min.js"></script>
    <script ignore src="./js/env.js"></script>
    <script ignore src="./js/utils.js"></script>
    <!-- uni 的 SDK，必须引用。 -->
    <script
      type="text/javascript"
      src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"
    ></script>
    <title>一梁一码溯源管理</title>
  </head>
  <body>
    <div id="app">
      <div class="dashboard-screen-container" v-if="client == 'App'">
        <div
          class="nav-bar-container"
          :style="{
            paddingTop: (client == 'App' ? statusBarHeight || 20 : 0) + 'px',   
            background: '#2D3DF2',
          }"
        >
          <van-nav-bar
            @click-left="onClickBack($event)"
            left-arrow
            :style="{ background: '#2D3DF2'}"
          >
            <template #left>
              <van-icon name="arrow-left" :size="22" color="#FFFFFF" />
            </template>
            <template #title>
              <div class="van-nav-bar-title" :style="{ color: '#FFFFFF' }">
                一梁一码溯源管理
              </div>
            </template>
          </van-nav-bar>
        </div>
        <div class="process-monitoring-container">
          <div class="banner"></div>
          <div class="main">
            <div class="pull-refresh-container">
              <van-pull-refresh
                :value="loading"
                @refresh="onRefresh"
                ref="pull-refresh"
              >
                <div style="height: 100%">
                  <div
                    class="process-item"
                    v-for="(v, i) in pageFlowListSource"
                    :key="i"
                  >
                    <div class="left">
                      <div class="dot"></div>
                      <div class="line"></div>
                    </div>
                    <div class="right">
                      <div class="state">
                        <img :src="filterStatusImg(v.currentStatus)" />
                      </div>
                      <div class="title">{{ v.taskNodeDesc }}</div>
                      <div class="content" @click="gotoDetail(v, i)">
                        <div class="user-time">
                          <div class="row" v-if="v.showInfo != 'XiaDan'">
                            <div class="lable">操作人员：</div>
                            <div class="value">{{ v.operatePtuser }}</div>
                          </div>
                          <div class="row">
                            <div class="lable">完成时间：</div>
                            <div class="value">{{ v.updateTime }}</div>
                          </div>
                        </div>
                        <van-icon name="arrow" size="14px" />
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 触底文案 -->
                <div
                  class="reach-bottom-container"
                  v-if="isReachBottomText && !loading"
                >
                  <van-loading size="24px" v-if="!reachBottomFinished">
                    加载中...
                  </van-loading>
                  <div class="no-more-data" v-else>~没有更多了~</div>
                </div>
              </van-pull-refresh>
            </div>
          </div>
        </div>
        <div class="h5-operation">
          <div
            class="h5-button"
            @click="gotoHandle('chuLiang')"
            v-if="jqButton"
          >
            出梁
          </div>
          <div
            class="h5-button"
            @click="gotoHandle('cunLiang')"
            v-if="cunliangButton"
          >
            存梁
          </div>
        </div>
      </div>
      <div v-else class="fail">
        <img src="./images/fail.png" alt="" srcset="" />
        <div class="tip">身份验证失败，请使用智慧生产App进行扫码操作！</div>
      </div>
    </div>
  </body>
</html>

<script type="module">
  var app = new Vue({
    el: "#app",
    provide() {
      return {};
    },
    data() {
      return {
        loginData: {
          userId: "",
          Tenantcode: "",
          Syssource: "",
        },
        rows: {},
        //页面参数
        //是否处于加载中状态
        loading: false,
        //是否显示触底文案
        isReachBottomText: false,
        //【触底】是否加载结束
        reachBottomFinished: false,
        pageFlowListSource: [],
        //
        statusBarHeight: 0,
        client: "",
        jqButton: false,
        cunliangButton: false,
      };
    },
    components: {},
    mounted() {
      let { uid, tenantCode, sysSource, client, statusBarHeight } =
        this.getUrlParams(window.location.href);
      this.client = client;
      if (client == "App") {
        this.statusBarHeight = statusBarHeight;
      } else {
        this.statusBarHeight = 0;
      }
      this.loginData = {
        userId: uid,
        Tenantcode: tenantCode,
        Syssource: sysSource,
        client,
        statusBarHeight,
      };
      localStorage.removeItem("SWIPER_DATA");
      localStorage.removeItem("swiper_index");
      localStorage.removeItem("swiper_title");
      this.getUserInfo();
      this.$nextTick((_) => {
        this.initOperate();
      });
    },
    methods: {
      gotoHandle(type) {
        //跳转到详情页面
        window.location.href = "./pages/handle.html";
        localStorage.setItem("operate", type);
      },

      onClickBack() {
        uni.navigateBack({
          url: "/pages/personalCenter/index",
        });
      },

      //查询用户信息
      getUserInfo() {
        this.$toast.loading({
          duration: 0,
          forbidClick: true,
          message: "页面加载中",
        });
        let { userId } = this.loginData;
        return new Promise((resolve, reject) => {
          axios({
            method: "POST",
            url: `${YX_BASE_API_URL}/auth/oauth/tokenRefresh?userId=${userId}`,
            responseType: "json",
            isAuthorization: false,
            data: {},
          })
            .then((res) => {
              let { data } = res;
              //通用数据写入缓存
              localStorage.setItem("ACCESS_TOKEN", data?.data?.access_token);
              localStorage.setItem("LOGIN_DATA", JSON.stringify(data?.data));
              localStorage.setItem("SYSTEM", JSON.stringify(this.loginData));
              this.getDetail();
              this.getData();
            })
            .catch((_) => {
              this.$toast("身份验证失败，请联系管理员！");
            })
            .finally((_) => {
              this.$toast.clear();
            });
        });
      },
      //初始化
      initOperate() {
        let scrollview = this.$refs["pull-refresh"]?.$el;
        scrollview.addEventListener(
          "scroll",
          debounce((e) => {
            if (
              Math.ceil(e.target.scrollTop + e.target.clientHeight) >=
              e.target.scrollHeight
            ) {
              //触底
              (!this.reachBottomFinished || !this.isReachBottomText) &&
                this.onReachBottom();
            }
          }, 500),
          true
        );
      },
      clacSize() {
        let scrollview = this.$refs["pull-refresh"]?.$el;
        if (scrollview.scrollHeight <= scrollview.clientHeight) {
          this.isReachBottomText = false;
          return false;
        }
        return true;
      },
      //触底加载
      onReachBottom() {},

      //下拉刷新开启
      onRefresh() {
        this.loading = true;
        this.getData();
      },

      getData() {
        let { token, sysSource, tenantCode, userId } = getLoginData();
        let { id } = this.getUrlParams(window.location.href);
        return new Promise((resolve, reject) => {
          axios({
            method: "GET",
            headers: {
              Authorization: `Bearer ${token}`,
              Tenantcode: tenantCode,
              Syssource: sysSource,
              userId,
            },
            url: `${YX_BASE_API_URL}/beam/lcTaskManager/getBodyFlowList`,
            responseType: "json",
            params: {
              id,
            },
          })
            .then((res) => {
              let {
                data: { data },
              } = res;
              let sourceData = data?.result || [];
              this.pageFlowListSource = sourceData.filter(
                (v) => v.currentStatus !== "1" && v.currentStatus !== "4"
              );
              resolve();
            })
            .catch((_) => {
              this.pageFlowListSource = [];
              reject();
            })
            .finally((_) => {
              //关闭下拉刷新
              setTimeout(() => {
                this.loading = false;
              }, 500);
            });
        });
      },

      //查询详情
      getDetail() {
        let { token, tenantCode, userId } = getLoginData();
        let { id } = this.getUrlParams(window.location.href);
        return new Promise((resolve, reject) => {
          axios({
            method: "POST",
            headers: {
              Authorization: `Bearer ${token}`,
              Tenantcode: tenantCode,
              userId,
            },
            url: `${YX_BASE_API_URL}/beam/lcTaskManager/getDetail?id=${id}`,
            responseType: "json",
          })
            .then((res) => {
              let {
                data: { data },
              } = res;
              this.jqButton = data.result?.jqButton || false;
              this.cunliangButton = data.result?.cunliangButton || false;
              this.rows = {
                id,
                bridgeName: data.result?.bridgeName || "",
                amClass: data.result?.amClass || "",
                span: data.result?.span || "",
                componentParts: data.result?.componentParts || "",
                controlId: data.result?.controlId || "",
              };
              localStorage.setItem("ROW_DATA", JSON.stringify(this.rows));
            })
            .catch((_) => {
              this.jqButton = false;
              this.cunliangButton = false;
            });
        });
      },

      //查看详情
      gotoDetail(v = {}, i = 0) {
        let { taskNodeDesc } = v;
        let swiper = {
          index: i,
          taskNodeDesc,
        };
        localStorage.setItem("SWIPER_DATA", JSON.stringify(swiper));
        //跳转到详情页面
        window.location.href = "./pages/detail.html";
      },

      filterStatusImg(val) {
        switch (val) {
          case "0":
            return "https://jszhgd.cn/static/app/beamyard/issued.png";
          case "1":
            return "https://jszhgd.cn/static/app/beamyard/completed.png";
          case "2":
            return "https://jszhgd.cn/static/app/beamyard/finish.png";
          default:
            break;
        }
      },

      getUrlParams(url) {
        // 通过 ? 分割获取后面的参数字符串
        let urlStr = url.split("?")[1];
        // 创建空对象存储参数
        let obj = {};
        // 再通过 & 将每一个参数单独分割出来
        let paramsArr = urlStr.split("&");
        for (let i = 0, len = paramsArr.length; i < len; i++) {
          // 再通过 = 将每一个参数分割为 key:value 的形式
          let arr = paramsArr[i].split("=");
          obj[arr[0]] = arr[1];
        }
        return obj;
      },
    },
    destroyed() {
      this.$toast.clear();
    },
  });
</script>
